<template>
  <div class="app">
    <van-form class="border_bottom" @submit="onSubmit">
      <van-field v-model="value" name="value" placeholder="输入学校,商务楼,地址"
        :rules="[{ required: true, message: '请填写此字段' }]" />
      <div style="margin: 16px;">
        <van-button block type="info" native-type="submit">
          提交
        </van-button>
      </div>
    </van-form>
    <header class="pois_search_history border_bottom" v-if="isShow">搜索历史</header>
    <!-- 搜索历史 -->
    <!-- <ul class="history_ul">
      <li class="history_li" v-for="(item,index) in historyList" :key="index" @click="goSearchDetail(item)">
        <h3>{{item.name}}</h3>
        <p>{{item.address}}</p>
      </li>
    </ul> -->
    <ul class="getpois_ul">
      <li class="getpois_li" v-for="(item, index) in list" :key="index" @click="locatemsite(index)">
        <h3>{{item.name}}</h3>
        <p>{{item.address}}</p>
      </li>
    </ul>
  </div>
</template>
<script>
  import Cookies from "js-cookie";
  export default {
    name: 'city',
    data: function () {
      return {
        id: "城市编号",
        value: '',
        list: [],
        isShow: true,
        title: "",
        historyList: [], //历史
      }
    },
    created() {
      // 获取url中的城市id
      let city_id = this.$route.params.id;
      console.log(this.$route);
      console.log(city_id);
      this.id = city_id;
      //改变title为当前定位城市  https://elm.cangdu.org/v1/cities/1
      const req_title = this.axios.get(this.$url + "v1/cities/" + city_id);
      this.axios.all([req_title]).then(this.axios.spread((res_title) => {
        //获取地址数据
        this.title = res_title.data.name;
        console.log(this.title);
        this.$store.commit("changeTitle", this.title);
        this.$store.commit("changeShowBack", true);
      })).catch(err => console.log(err));

      //读取loclstrong中的历史记录
      this.historyList = JSON.parse(localStorage.getItem('placeHistory'));
      console.log(this.historyList);
    },
    methods: {
      onSubmit(values) {
        // console.log('submit', values);
        // 隐藏搜索历史
        this.isShow = false;
        //https://elm.cangdu.org/v1/pois?city_id=1&keyword=迪士尼&type=search
        const request1 = this.axios.get(this.$url + "/v1/pois?city_id=" + this.id + "&keyword=" + values.value + "&type=search");
        this.axios.all([request1]).then(this.axios.spread((res1) => {
          //获取地址数据
          this.list = res1.data;
          // console.log(this.list);
          // console.log(this.list[0].name);
        })).catch(err => console.log(err));

      },
      locatemsite(msite_index) {
        // console.log(this.list[msite_index]);
        // 获取经纬度
        // console.log(this.list[msite_index].geohash);
        // 设置location经纬度全局变量
        this.$root.location = this.list[msite_index].geohash;
        Cookies.set("latitude", this.list[msite_index].latitude);
        Cookies.set("longitude", this.list[msite_index].longitude);
        this.$router.push({ path: "/main" });

        //存入搜索历史
        //获取本次点击的placeHistory
        console.log(this.list[msite_index]);
        // localStorage.setItem('placeHistory', JSON.stringify(this.list[msite_index]));、

        //获取已存的placeHistory
        // let placeHistoryListIn = [];
        // console.log(typeof placeHistoryListIn);
        // placeHistoryListIn.push(localStorage.getItem('placeHistory'));
        // console.log(typeof placeHistoryListIn);
        // placeHistoryListIn.push(JSON.stringify(this.list[msite_index]));
        // console.log(typeof placeHistoryListIn);
        // console.log(placeHistoryListIn);
        // localStorage.setItem('placeHistory', JSON.stringify(placeHistoryListIn));

        //将地址名称存入cookie
        // console.log(this.list[msite_index].name);
        Cookies.set("city_name", this.list[msite_index].name);

      },
      goSearchDetail(msite_index) {
        console.log(this.historyList[msite_index]);
        // 获取经纬度
        console.log(this.historyList[msite_index].geohash);
        // 设置location经纬度全局变量
        this.$root.location = this.historyList[msite_index].geohash;
        Cookies.set("latitude", this.historyList[msite_index].latitude);
        Cookies.set("longitude", this.historyList[msite_index].longitude);
        // console.log(this.$root.location);
        this.$router.push({ path: "/main" });
      }
    },
  }
</script>
<style lang="less" scoped>
  .app {
    background-color: rgb(245, 245, 245);
    padding: 20px 0;
  }

  .city_form {
    background-color: white;
    padding-top: 20px;
  }

  .van-form {
    padding: 20px 20px;
    text-align: center;
    background-color: white;
  }

  .van-field {
    padding-left: 30px;
    width: 90%;
    background-color: white;
    border: 2px solid rgb(217, 217, 217);
    border-radius: 10px 10px;
  }

  .van-cell {
    height: 70px;
    width: 100%;
    font-size: 40px;
  }

  .van-button {
    height: 70px;
    /* width: 100%; */
  }

  .border_bottom {
    border-bottom: 2px solid rgb(228, 228, 228);
  }

  .pois_search_history {
    text-align: left;
    padding: 5px;
    /* no */
  }

  .getpois_ul {
    display: inline-block;
    width: 100%;
  }

  .history_ul {
    display: inline-block;
    width: 100%;
  }

  .getpois_li {
    /* width: 100%; */
    height: 100px;
    text-align: left;
    padding: 30px 20px;
    background-color: white;
    border-bottom: 2px solid rgb(228, 228, 228);
    border-top: 2px solid rgb(228, 228, 228);
  }

  .history_li {
    /* width: 100%; */
    height: 100px;
    text-align: left;
    padding: 30px 20px;
    background-color: white;
    border-bottom: 2px solid rgb(228, 228, 228);
    border-top: 2px solid rgb(228, 228, 228);
  }
</style>